<template>
  <div class="cls1">
    <h2>这是首页 - Home</h2>
    <button @click="mapClick">map测试</button>
    <br>
    <button @click="filterClick">filter测试</button>
    <br>
    <button @click="reduceClick">reduce测试</button>
  </div>
</template>

<script setup>
import {useRoute} from 'vue-router'

const route = useRoute()
console.log("name:" + route.query.name)//接收参数

// 数组处理方法
/**
 * （1）forEach方法没有返回值，一般用于直接修改原数组；
 *
 * （2）map方法会返回新的数组，在处理元素为引用数据类型的数组时可以通过数据的拷贝不修改原数组（拷贝的方法我们会在下回和大家做专门的讲解），
 *     并且可以结合其他方法执行更多层的操作；
 *
 * （3）filter()方法用于过滤数组，返回的结果就是过滤后的新数组；
 *
 * （4）reduce()方法在一般需要对数组元素的数据进行一些运算处理时使用，返回的值就是最终的结果；
 *
 * （5）some()方法用于判断数组中是否有满足条件的元素，返回结果是布尔值，只要有一个符合就是true；
 *
 * （6）every()方法用于判断数组中的元素是否都符合判断条件，返回结果是布尔值，都符合才会返回true。
 *
 */
const mapClick = () => {
  let arrayNum = [1, 2, 3, 4, 5, 6];
  let arrayString = ["apple", "banana", "tomato", "potato", "meat", "milk"];
  let newNums = arrayNum.map((item, index, arr) => {
    // console.log(item);
    // console.log(index);
    // console.log(arr);
    return item * item;
  })
  // console.log(newNums);
  let newStrings = arrayString.map((item) => {
    if (item !== 'potato') {
      return item;
    }
  })
  // console.log(newStrings)
}
const filterClick = () => {
  let arrayNum = [1, 1, 2, 3, 3, 3, 4, 5, 3, 6, 5, 9];
  let arrayString = ["apple", "banana", "tomato", "orange", "potato", "meat", "milk"];
  let arrayObj = [{
    name: "张三",
    age: 18
  }, {
    name: "李四",
    age: 28
  }, {
    name: "王五",
    age: 22
  }, {
    name: "赵六",
    age: 32
  }, {
    name: "刘大",
    age: 30
  },];

  // let newNums = arrayNum.filter((item, index, arr) => {
  //   // console.log(item);
  //   // console.log(index);
  //   // console.log(arr);
  //
  //   return item % 2 === 0;
  // })
  // console.log(newNums);

  // let newString = arrayString.filter(item => item !== 'potato')
  // console.log(newString);
  // arrayObj.sort((a, b) => a.age - b.age);
  // console.log(arrayObj);
  // let newObj = arrayObj.filter((item) => item.age > 25)
  // console.log(newObj);
  // 数组去重
  let newNum = arrayNum.filter((item, index, arr) => arr.indexOf(item) === index);
  console.log(newNum);
}

let reduceClick = () => {
  let arr = [2, 3, 5, 7, 9, 11, 13, 17]
  // 第一次调用时，previous表示就是数组的第一个元素的值,current是数组第二个元素的值
  // 第二次调用时，previous表示的是上次调用时return出来的值，current是数组第三个元素的值
  // 第三次调用时，previous同样表示的是上次调用返回的值，current表示数组第四个元素的值
  let result = arr.reduce((previous, current, index, arr) => {
    // console.log('previous:', previous, ' current:', current);
    // console.log(index);
    // console.log(arr);
    return previous + current;
  })
  // console.log(result)

  // 传入第二参数initValue时，我们以一个获得新数组的每个元素是原数组每个元素累计相加之和
  let sum = 0
  let result1 = arr.reduce((previous, current) => {
    // console.log(previous, 'current:', current)
    previous.push(sum + current)
    sum += current
    return previous
  }, [])
  // console.log('result:', result1)
  // 购物车应用举例
  let arrObj = [
    {
      id: 12334,
      isChecked: 1, // 1表示购物车选中了这个产品
      cartPrice: 5999, // 表示产品单价5999
      skuNum: 2, // 表示购物车产品数量为1
      skuName: "小米10 至尊纪念版 双模5G 骁龙865 120W快充 8GB+128GB 陶瓷黑 游戏手机",
    },
    {
      id: 12375,
      isChecked: 1, // 0表示购物车没有选中这个产品
      cartPrice: 2323, // 表示产品单价为2323
      skuNum: 1, // 表示购物车产品数量为1
      skuName: "华为P40 5G全网通智能手机 支持鸿蒙HarmonyOS 零度白 8G+128G",
    },
    {
      id: 12376,
      isChecked: 1, // 1表示购物车选中了这个产品
      cartPrice: 8197, // 表示产品单价为8197
      skuNum: 3, // 表示购物车产品数量为1
      skuName: "Apple iPhone 12 (A2404) 64GB 黑色 支持移动联通电信5G 双卡双待手机",
    },
  ]

  // 计算购物车选中产品数
  let num = arrObj.reduce((previous, current) => {
    return previous + current.isChecked
    // previous初始值是传入的第二个参数0，current表示数组的当前遍历到的对象
  }, 0);
  console.log("选中产品数：" + num);

  let price = arrObj.reduce((previous, current) => {
    return previous + current.isChecked * current.cartPrice * current.skuNum
    // 选中的产品的数量和价格的乘积累计相加
  }, 0);
  // 最终的price的值就是选中产品总价
  console.log(price)
}
</script>

<style scoped>
.cls1 {
  background: #def;
  min-height: 500px;
}

.cls1 h2 {
  margin: 0;
  padding: 0;
}
</style>